<template>
    <div class='app-container'>
        <!-- <PageHeader :border="false" title="办案中心管理"/> -->
        <el-divider class="mt-0" />
        <el-table ref="TableRef" v-loading="loading" :data="Table" show-overflow-tooltip style="height: 240px;" border>
            <el-table-column label="办案单位" prop="unitname" />
            <el-table-column label="办案部门" prop="depname" />
            <el-table-column label="办案区" prop="policeareaName" />
            <el-table-column label="承办人" prop="askName" />
            <el-table-column label="申请日期" prop="adddate" />
            <el-table-column label="案件名称" prop="caseName" />
            <el-table-column label="涉案人姓名" prop="byInquestName" />
            <el-table-column label="性别" prop="user_sex">
                <template #default="scope">
                    <dict-tag :options="nj_sex" :value="scope.row.user_sex" />
                </template>
            </el-table-column>
            <el-table-column label="类型" prop="user_type">
                <template #default="scope">
                    <dict-tag :options="nj_sheanren_type" :value="scope.row.user_type" />
                </template>
            </el-table-column>
            <el-table-column label="实际进入时间" prop="factIndate" />
            <el-table-column label="实际离开时间" prop="factOutdate" />
            <el-table-column label="状态" prop="detailState">
                <template #default="scope">
                    <dict-tag :options="nj_applydetail_status" :value="scope.row.detailState" />
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="140" align="center">
                <template #default="scope">
                    <el-button v-if="scope.row.detailState !== 0" link size="small" type="primary"
                        @click="BAManageRef.showDetail(scope.row, '1')">
                        <el-icon class="me-1">
                            <Edit />
                        </el-icon>
                        编辑
                    </el-button>
                    <el-button link size="small" type="danger" @click="cancel(scope.row.jw_applydetail_id)">
                        <el-icon class="me-1">
                            <Delete />
                        </el-icon>
                        取消
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" v-model:limit="paging.pageSize" v-model:page="paging.pageNum" :total="total"
            @pagination="getBAManageLists" />
        <el-row v-for="(group, index) in RoomTable" :key="index">
            <el-col :span="24" class="RoomTableTittle">
                <h4 v-if="group.basePolicearea">
                    <el-icon class="me-1" color="#0d6efd">
                        <OfficeBuilding />
                    </el-icon>
                    <span>{{ group.basePolicearea.areaname }}</span>
                </h4>
            </el-col>
            <el-col :span="24">
                <el-row :gutter="20">
                    <el-col :span="4" v-for="(room, roomIndex) in group.baseRoomList" :key="roomIndex">
                        <el-card shadow="never" class="grid-content ep-bg-purple" v-if="room.isUsing"
                            @click="handleRoomClick(room)">
                            {{ room.roomName }}
                            <p style="text-align: center;line-height:24px;font-size: 24px;margin:20px 0;">
                                {{ '使用中' }}
                            </p>
                            <template #footer v-if="room.isUsing">
                                <div class="room-list-footer">
                                    <el-button type="primary" size="small" link>进入房间</el-button>
                                </div>
                            </template>
                        </el-card>
                        <el-card shadow="never" class="grid-content ep-bg-purple2" v-else
                            @click="handleRoomClick(room)">
                            {{ room.roomName }}
                            <p style="text-align: center;line-height:24px;font-size: 24px;margin:20px 0;">
                                {{ '空闲中' }}
                            </p>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <BAManage ref="BAManageRef" @getBAManageList="getBAManageLists" />
    </div>
</template>
<script setup>
import PageEnum from "@/enum/PageEnum.js";

const { proxy } = getCurrentInstance();
const { nj_sex, nj_sheanren_type, nj_applydetail_status } = proxy.useDict('nj_sex', 'nj_sheanren_type', 'nj_applydetail_status')

import BAManage from "@/components/BAManageDetail/BAManageDetail.vue";
import { getUserProfile } from "@/api/system/user";
import { BAManageList, roomStateList, ApplyDetailCancel } from "@/api/BAApply/BAApply";
import { ElMessage, ElMessageBox } from "element-plus";
const loading = ref(false)
const BAManageRef = ref({})
const unitId = ref()
const queryParams = ref({ type: 1 })
const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE
})

const RoomqueryParams = ref({ unitId: null, policeAreaType: 1 })
const Roompaging = ref({ pageNum: 1, pageSize: 99 })


const Table = ref([{}])
const RoomTable = ref([{}])

const total = ref(0)
onMounted(() => {
    getBAManageLists()
})
// 获取个人信息
const getUserInfo = async () => {
    await getUserProfile().then(res => {
        RoomqueryParams.value.unitId = res.data.unitId
        getroomStateLists()
    })
}
// 获取
const getBAManageLists = async () => {
    loading.value = true
    await BAManageList(queryParams.value, paging.value).then(res => {
        Table.value = res.rows
        total.value = res.total
        loading.value = false
    })
    getUserInfo()
}
// 获取房间状态列表
const getroomStateLists = async () => {
    await roomStateList(RoomqueryParams.value, Roompaging.value).then(res => {
        RoomTable.value = res.data
    })
}
// 获取房间状态列表
const handleRoomClick = async (room) => {
    console.log('点击的房间信息:', room); // 输出点击房间的所有信息
    if (room.JwApplyDetailId) {
        const data = {
            jw_applydetail_id: room.JwApplyDetailId,
            jw_apply_id: room.JwApplyId
        }
        BAManageRef.value.showDetail(data, '1')
    }
}
// 取消此条申请
const cancel = async (id) => {
    ElMessageBox.confirm(
        '确定要取消此申请吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        await ApplyDetailCancel(id).then(async () => {
            await getBAManageLists()
        })
    }).catch(() => {
    })
}
</script>
<style scoped>
.RoomTableTittle h4 {
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
    padding: 5px 10px;
    height: 134.65px;
}

.ep-bg-purple {
    box-shadow: -2px 2px 6px rgba(155, 85, 21, .5), -2px 0px 12px rgba(155, 85, 21, .8);
    background-image: linear-gradient(to bottom right, #F7A700, #922C01);
}

.ep-bg-purple2 {
    box-shadow: -2px 2px 6px rgba(19, 141, 21, .5), -2px 0px 12px rgba(19, 141, 21, .5);
    background-image: linear-gradient(to bottom right, #0DE304, #015814);
}

.el-card {
    border: none;
    padding: 0;
}

:deep().el-card__body {
    padding: 5px 10px !important;
}

:deep().el-card__footer {
    padding: 10px 0;
    text-align: center;
    color: white;
}

:deep().el-card__footer button {
    color: white;
}
</style>